<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title>播放</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/gotye.css"/>
    <style>
    	body{
        	background:transparent;

        }

    </style>
</head>
<body>
	<div class="mask" tapmode onclick="resetmask();"></div>
	<div class="viewer-count"><img src="../image/viewer.png" /><font id="viewerCount"></font></div>
	<div class="viewer-list-btn" id="viewerListBtn" tapmode onclick="showViewerList();event.cancelBubble=true;"><i class="aui-iconfont aui-icon-menu"></i></div>
	<div class="viewer-list" id="viewerList">
	</div>
	<div class="quality" id="quality" tapmode onclick="onQualityClick();event.cancelBubble=true;">标清<i class="aui-iconfont aui-icon-down aui-margin-l-10"></i></div>
	<div class="quality-option" id="qualityOption">
		<div class="quality-option-item" tapmode onclick="onQualityItemClick(this);event.cancelBubble=true;">标清</div>
		<div class="quality-option-item" tapmode onclick="onQualityItemClick(this);event.cancelBubble=true;">高清</div>
		<div class="quality-option-item" style="border-bottom: none;" tapmode onclick="onQualityItemClick(this);event.cancelBubble=true;">超清</div>
	</div>

	<img class="console-main" id="consoleMain" src="../image/publisher/hexagon.png" style="background: transparent;left:0;border: none;" tapmode onclick="showConsole();event.cancelBubble=true;"/>
	<div class="console" id="console">
		<div class="console-main" id="consoleMain"><div class="console-main-btn" id="consoleMainBtn" tapmode onclick="startPublisher(this);event.cancelBubble=true;"></div></div>
		<div class="console-other-btn" tapmode onclick="switchCamera();event.cancelBubble=true;">
			<img src="../image/publisher/camera.png"/>
		</div>
		<div class="console-other-btn" style="margin-top: 15px;margin-left: 45px;" tapmode onclick="shareurl();event.cancelBubble=true;">
			<img src="../image/publisher/share.png"/>
		</div>
		<div class="console-other-btn" style="margin-top: 60px;margin-left: 60px;" tapmode onclick="setScreen();event.cancelBubble=true;">
			<img src="../image/publisher/screen.png"/>
		</div>
		<div class="console-other-btn" style="margin-top: 105px;margin-left: 45px;" tapmode onclick="setTorch();event.cancelBubble=true;">
			<img id="torchImg" src="../image/publisher/torchoff.png"/>
		</div>
		<div class="console-other-btn" style="margin-top: 115px;" tapmode onclick="setFilter();event.cancelBubble=true;">
			<img id="filterImg" src="../image/publisher/filteroff.png"/>
		</div>
	</div>

	<div class="chart-list" id="chartList"></div>

	<div class="comment-btn" tapmode onclick="showChatInput();event.cancelBubble=true;"><img class="btn-img" src="../image/comment.png" /></div>
	<div class="close-btn" tapmode onclick="closeAlert();event.cancelBubble=true;"><img class="btn-img" src="../image/close.png" /></div>
	<div class="chart-input" id="chartInputBar"><input id="chartInput" type="text" autofocus="autofocus" placeholder="说点什么吧" onBlur="hideChatInput()"/></div>
	<div class="chart-send-btn" id="sendBtn" tapmode onclick="sendChart();">发送</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript">
  var is_start = 1;
  var is_mute = 1;
  var is_flash = 1;
  var is_start_capture = 0;
  var is_beauty = 1;

	var session={};
	var UIInputId;
	var publisher,chat,p2p;
	var qualityOpen=false;
	var torchOn=false;
	var filterOn=false;
	var screenOrientation='portrait_up';
	var localId,remoteId;
	var publishOn=false;

	// apiready = function(){
		//设置屏幕为全屏
		// api.setFullScreen({
		//     fullScreen: true
		// });
		//
		// //监听网络情况
		// api.addEventListener({
		//     name:'offline'
		// }, function(ret, err){
		//     insertChartContent('sys','系统','网络异常！');
		// });
		// api.addEventListener({
		//     name:'online'
		// }, function(ret, err){
		//     insertChartContent('sys','系统','网络恢复！');
		// });
		//
		// api.parseTapmode();
		//初始化聊天信息
		// insertChartContent('sys','系统','正在连接聊天服务器...');
		// chat = api.require('gotyeLiveChat');
		// chat.init(session);
		// chat.login(function(ret, err) {
		//     if (ret) {
		//     	localId=ret.account;
		//     	insertChartContent('sys','系统','连接聊天服务器成功');
		// 		initUserList();
		// 		//定时刷新用户列表，目前设置是1分钟刷新一次
		//       	setInterval("initUserList()",1000*6);
		//         chat.getRoomMemberCount(function(ret, err) {
		// 		    if (ret) {
		// 		        //alert('count'+JSON.stringify(ret));
		// 		        $('#viewerCount').text(ret.count);
		// 		    }
		// 		});
		//     } else {
		//         insertChartContent('syserro','系统','连接聊天服务器失败');
		//     }
		// });
		//
		// //监听收到的消息
		// chat.addEventListener({
		//     name: 'receiveMsg'
		// }, function(ret, err) {
		//     if(ret){
		//     	if(ret.extra=='inviteaccept'){
		//     		insertChartContent('sys',ret.sendName,'对方已接受连麦');
		//     		remoteId=ret.sendId;
		//     		if(api.systemType=='ios'){
		// 		    	api.openFrame({
		// 				    name: 'p2p',
		// 				    url: '../html/p2p.html',
		// 				    rect:{
		// 				        x: api.frameWidth-130,
		// 		                y: api.frameHeight-250,
		// 		                w: 120,
		// 		                h: 160
		// 				    },
		// 				    bounces: false,
		// 				    bgColor: 'rgba(0,0,0,0)',
		// 				    vScrollBarEnabled:false,
		// 				    hScrollBarEnabled:false
		// 				});
		//
		// 				p2p = api.require('gotyeLiveP2P');
		// 				p2p.joinRoom({
		// 					roomId:api.pageParam.roomId,
		// 					localId:localId,
		// 					remoteId:ret.sendId,
		// 					localView:{
		// 						fixedOn:'player',
		// 						fixed:true
		// 					},
		// 					remoteView:{
		// 						fixedOn:'p2p',
		// 						fixed:true
		// 					}
		// 				});
		// 			}else{
		// 				p2p = api.require('gotyeLiveP2P');
		// 				p2p.joinRoom({
		// 					roomId:api.pageParam.roomId,
		// 					localId:localId,
		// 					remoteId:ret.sendId,
		// 					rendererView:{
		// 						fixedOn:'player',
		// 						fixed:true,
		// 						paddingBottom:20,
		// 						paddingRight:20,
		// 						ratio:0.4
		// 					}
		// 				});
		// 			}
		//
		// 			p2p.addEventListener({
		// 			    name: 'joinedRoom'
		// 			}, function(ret, err) {
		// 				insertChartContent('sys','系统','连麦-加入房间成功');
		// 				$('#p2pCancel').show();
		// 			});
		//
		// 			p2p.addEventListener({
		// 			    name: 'connected'
		// 			}, function(ret, err) {
		// 				insertChartContent('sys','系统','连麦-建立连接成功');
		// 			});
		//
		// 			p2p.addEventListener({
		// 			    name: 'disconnected'
		// 			}, function(ret, err) {
		// 				insertChartContent('sys','系统','连麦-断开连接');
		// 				api.closeFrame({
		// 					name: 'p2p'
		// 		        });
		// 			});
		//
		// 			p2p.addEventListener({
		// 			    name: 'error'
		// 			}, function(ret, err) {
		// 				insertChartContent('sys','系统','连麦-错误'+ret.description);
		// 				api.closeFrame({
		// 					name: 'p2p'
		// 		        });
		// 			});
		//     	}else if(ret.extra=='cancelp2p'){
		//     		p2p.leaveRoom();
		// 			api.closeFrame({
		// 				name: 'p2p'
		// 	        });
		// 			$('#p2pCancel').hide();
		//     	}else if(ret.extra=='inviterefuse'){
		//     		insertChartContent('user',ret.sendName,'对方已拒绝连麦');
	  //   		}else
	  //   			insertChartContent('user',ret.sendName,ret.text);
		//     }
		// });

	// 	chat.addEventListener({
	// 	    name: 'forceLogout'
	// 	}, function(ret, err) {
	// 	    api.alert({
	// 	    	msg:'您的账号在另外的设备登录，当前设备需强制踢下线',
	// 	    	buttons:['知道了']
  //           },function(ret,err){
  //           	if(ret.buttonIndex=='1'){
  //           		close();
  //           	}
  //           });
	// 	});
	// };

	//获取观众总数及观众列表信息
	function initUserList(){
		 chat.getRoomMemberCount(function(ret, err) {
		    if (ret) {
		        $('#viewerCount').text(ret.count);
		    }
		 });
		 chat.queryUserList({index:1,total:20},function(ret, err) {
		    if( ret ){
		         var ht_user='<div class="viewer-list-item aui-ellipsis-1 aui-padded-l-15"><img class="crown" src="../image/publisher/crown.png" />主播</div>';
		    	 for(var i=0;i<ret.entities.length;i++){
		    	 	ht_user+=
		    	 		'<div class="viewer-list-item aui-ellipsis-1" data-account="'+ret.entities[i].account+'" tapmode onclick="onUserClick(this);event.cancelBubble=true;">'+ret.entities[i].nickname+'</div>';
		    	 }
		    	 $('#viewerList').html(ht_user);
		    }else{
		         alert( JSON.stringify( err ) );
		    }
		});
	}

	function insertChartContent(type,sender,content){
		if(type=='sys')
			$('#chartList').append('<div class="chart-item sys-text">'+content+'</div>');
		else if(type=='syserro')
			$('#chartList').append('<div class="chart-item sys-text-erro">'+content+'</div>');
		else if(type=='user')
			$('#chartList').append('<div class="chart-item"><font class="aui-text-success">'+sender+'：</font>'+content+'</div>');
		else
			$('#chartList').append('<div class="chart-item"><font class="aui-text-danger">'+sender+'：</font>'+content+'</div>');

		$('#chartList').animate({
			scrollTop:$('#chartList').scrollTop()+50
		}, 500);
	}


	function closeAlert(){
		var dialogBox = api.require('dialogBox');
		dialogBox.alert({
		    texts: {
		        content: '确定要退出直播？',
		        leftBtnTitle: '退出',
		        rightBtnTitle: '取消'
		    },
		    styles: {
		        bg: 'rgba(0,0,0,0.5)',
		        corner: 5,
		        w: 230,
		        content: {
		            color: '#FFFFFF',
		            size: 14
		        },
		        left: {
		            marginB: 15,
		            marginL: 10,
		            w: 80,
		            h: 30,
		            corner: 5,
		            bg: '#9F61E8',
		            color: '#FFFFFF',
		            size: 12
		        },
		        right: {
		            marginB: 15,
		            marginL: 50,
		            w: 80,
		            h: 30,
		            corner: 5,
		            bg: '#DDDDDD',
		            color: '#999999',
		            size: 12
		        }
		    }
		}, function(ret) {
		    if (ret.eventType == 'left') {
		        dialogBox.close({
		            dialogName: 'alert'
		        });
		        close();
		    }else if (ret.eventType == 'right') {
		        dialogBox.close({
		            dialogName: 'alert'
		        });
		    }
		});
	}

	function close(){
		api.setFullScreen({
		    fullScreen: false
		});
    api.sendEvent({name: 'menuGoBack'});
		chat.logout();
		api.closeFrame({
			name: 'p2p'
        });

	}

	//显示聊天输入框
	function showChatInput(){
		var wInput=api.frameWidth-100;
		$('#chartInputBar').show();
		$('#sendBtn').show();
		$('#chartInputBar').css('width',wInput+'px');
		$('#chartInput').css('width',(wInput-20)+'px');
	}

	//隐藏聊天输入框
	function hideChatInput(){
		$('#chartInputBar').hide();
		$('#sendBtn').hide();
	}

	//展开清晰度下拉框
	function onQualityClick(){
		if(!qualityOpen){
			qualityOpen=true;
			$('#qualityOption').show();
		}else{
			qualityOpen=false;
			$('#qualityOption').hide();
		}
	}

	//选择清晰度
	function onQualityItemClick(tag){
		qualityOpen=false;
		$('#qualityOption').hide();
		$('#quality').html($(tag).text()+'<i class="aui-iconfont aui-icon-down aui-margin-l-10"></i>');
	}

	function showViewerList(){
		$('#viewerListBtn').hide();
		setTimeout(function() {
            $('#viewerList').show()
        },
        300)
	}

	function hideViewerList(){
		$('#viewerListBtn').show();
		$('#viewerList').hide();
	}


	function showConsole(){
		$('#consoleMain').hide();
		$('#consoleMain').css('background','transparent');
		if(!publishOn)
			$('#consoleMainBtn').css('background','#56B363');
		else
			$('#consoleMainBtn').css('background','#C76B5C');
		$('#console').show();
	}

	function hideConsole(){
		$('#consoleMain').show();
		$('#consoleMain').css('background','transparent');
		$('#consoleMainBtn').css('background','#FFFFFF');
		$('#console').hide();
	}

	//开启直播
	function startPublisher(tag){
    //暂停
    if(is_start){
        is_start = 0;
        insertChartContent('sys','系统','停止直播');
        $(tag).css('background','#C76B5C');
        api.sendEvent({
            name: 'stopAndStart',
            extra: {type: 'pauseL'}
        });
    //开始
    }else{
        is_start = 1;
        insertChartContent('sys','系统','开始直播');
          $(tag).css('background','#56B363');
        api.sendEvent({
            name: 'stopAndStart',
            extra: {type: 'resumeL'}
        });
    }
	}

	//设置前后摄像头
	function switchCamera(){
		api.sendEvent({name: 'switchCameraL'});
	}

  function shareurl() {
    var sharedModule = api.require('shareAction');
    sharedModule.share({

        text: '我是一阵风直播',
        thumbnail:'../image/share/message.png',
        path: 'http://xcx.lmyyst.com/app/index.php?i=2&c=entry&rid=13&do=index&m=wxz_wzbagent',
        type: 'url'
    });
  }

	//设置横屏竖屏
	function setScreen(){
		if(screenOrientation=='portrait_up'){
			screenOrientation='landscape_left';
		}else{
			screenOrientation='portrait_up';
		}

		api.setScreenOrientation({
		    orientation: screenOrientation
		});
	}

	//设置闪光灯
	function setTorch(){
    //静音
    if(is_flash == 0){
        is_flash = 1;
    }else{
        is_flash = 0;
    }
    api.sendEvent({
        name: 'setFlashL',
        extra: {type: is_flash}
    });
	}

	//设置滤镜
	function setFilter(){
    if(is_beauty == 0){
        is_beauty = 1;
    }else{
        is_beauty = 0;
    }
    api.sendEvent({
        name: 'setBeautyOn',
        extra: {type: is_beauty}
    });
	}

	function resetmask(){
		$('#chartInput').blur();
		//聊天输入框
		hideChatInput();
		//清晰度
		qualityOpen=false;
		$('#qualityOption').hide();
		//观看人
		hideViewerList();
		//主控按钮
		hideConsole();
	}

	function sendChart(){
		var content=$('#chartInput').val();
		if(content == '' || content.match(/^\s+$/g)){
			api.alert({
				msg:'请输入聊天内容'
            });
            return;
		}
		chat.sendText({text: content}, function(ret, err) {
		    if (err) {
		        api.toast({
				    msg: '发送失败',
				    duration: 2000,
				    location: 'bottom'
				})
		    }else{
				insertChartContent('me',api.pageParam.nickname,content);
				$('#chartInput').val('');
		    }
		});
	}
</script>
</html>
